<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Debug - 系统管理</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <header class="header">
            <div class="header-content">
                <div class="logo">
                    <h1>🔧 系统管理中心 - Debug</h1>
                    <p>调试版本</p>
                </div>
            </div>
        </header>

        <!-- 导航标签 -->
        <nav class="nav-tabs">
            <button class="nav-tab active" onclick="switchTab('dashboard')">📊 仪表板</button>
            <button class="nav-tab" onclick="switchTab('subscriptions')">🔔 订阅管理</button>
            <button class="nav-tab" onclick="switchTab('servers')">🖥️ 服务器管理</button>
        </nav>

        <!-- 仪表板标签页 -->
        <div id="dashboard-tab" class="tab-content active">
            <h2>仪表板</h2>
            <p>这是仪表板内容</p>
        </div>

        <!-- 订阅管理标签页 -->
        <div id="subscriptions-tab" class="tab-content">
            <h2>订阅管理</h2>
            <p>这是订阅管理内容</p>
        </div>

        <!-- 服务器管理标签页 -->
        <div id="servers-tab" class="tab-content">
            <h2>服务器管理</h2>
            <p>这是服务器管理内容</p>
        </div>
    </div>

    <script>
        console.log('🚀 调试页面加载完成');
        
        function switchTab(tabName) {
            console.log('🔄 切换标签页到:', tabName);
            
            try {
                // 隐藏所有标签页
                document.querySelectorAll('.tab-content').forEach(tab => {
                    tab.classList.remove('active');
                });
                
                // 移除所有标签按钮的激活状态
                document.querySelectorAll('.nav-tab').forEach(btn => {
                    btn.classList.remove('active');
                });
                
                // 显示目标标签页
                const targetTab = document.getElementById(`${tabName}-tab`);
                console.log('🎯 目标标签页:', targetTab);
                if (targetTab) {
                    targetTab.classList.add('active');
                    console.log('✅ 标签页已激活');
                } else {
                    console.error('❌ 未找到目标标签页:', `${tabName}-tab`);
                    return;
                }
                
                // 激活对应的标签按钮
                const targetBtn = document.querySelector(`[onclick="switchTab('${tabName}')"]`);
                console.log('🎯 目标按钮:', targetBtn);
                if (targetBtn) {
                    targetBtn.classList.add('active');
                    console.log('✅ 按钮已激活');
                } else {
                    console.error('❌ 未找到目标按钮');
                }
                
            } catch (error) {
                console.error('❌ 切换标签页失败:', error);
            }
        }
        
        // 测试函数是否可用
        console.log('🧪 switchTab函数类型:', typeof switchTab);
        
        // 测试点击事件
        document.addEventListener('DOMContentLoaded', function() {
            console.log('✅ DOM加载完成');
            
            // 测试所有按钮
            document.querySelectorAll('.nav-tab').forEach((btn, index) => {
                console.log(`按钮 ${index}:`, btn.textContent, btn.onclick);
            });
        });
    </script>
</body>
</html>



